<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验</title>

    <!-- 链接外部样式文件 bootstrap.min.css -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- 引入 jQuery 核心 JavaScript 文件 -->
    <script src="jquery/jquery-3.6.0.min.js" type="text/javascript"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="bootstrap/js/bootstrap.bundle.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="styles/test.css">

</head>

<body>

    <h3>表单</h3>

    <form action="#">
        <div class="myform">

            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" name="email" id="email" class="form-control">
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" name="password" id="password" class="form-control">
            </div>

            <div class="form-group">
                <label>爱好</label>
                <div>
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" >吃
                    </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" >吃鸡
                    </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" >睡
                    </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" >上厕所
                    </label>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label>性别</label>
                <div class="radio">
                    <label class="radio-inline"> <input type="radio" name="gender" value="male"> 靓仔 </label>
                    <label class="radio-inline"> <input type="radio" name="gender" value="female"> 靓妹 </label>
                </div>
            </div>

            <div>
                <button type="submit" class="btn btn-primary">提交</button>
            </div>

        </div>
    </form>
    <hr>

    <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Dropdown button
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <a class="dropdown-item" href="#">Link 3</a>
        </div>
    </div>
</body>

</html>